<template>
  <div class="menucomment">
    <div id="icon">
      <div>
        <i
          class="fa fa-thumbs-o-up fa-2x"
          :style="{color:likecolor}"
          @click="like"
          aria-hidden="true"
          id="like"
        >
          <span id="likeNum">{{meallikeNum}}</span>
        </i>
      </div>
      <div>
        <i
          class="fa fa-star-o fa-2x"
          :style="{color:collectcolor}"
          @click="collect"
          aria-hidden="true"
          id="coll"
        ></i>
      </div>
      <div>
        <i
          class="fa fa-commenting-o fa-2x"
          arSia-hidden="true"
          id="com"
          @click="isshow=!isshow;comment()"
        ></i>
      </div>
    </div>
    <div id="comments" v-show="isshow">
      <div id="box" class="bos">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="快来写下你的神评论吧！"
          v-model="newcomment"
          id="txt"
        ></el-input>
        <button id="btn" class="fa fa-location-arrow" @click="upcomment">发表评论</button>
        <ul id="ul">
          <li v-for="(list,index) in menucomment" :key="index">
            <img :src="getPic(list.headPic)" alt />
            <i>
              <span>{{list.userName}}：</span>
              {{list.commentContent}}
            </i>
            <div id="content">
              <span>评论于{{list.commentTime | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
              <a class="rma" href="####" v-show="iscomment[index] " @click="delcomment(index)">删除</a>
            </div>
          </li>
          <div id="nocomment" v-show="isnocomment">
            <p>暂时还没有人来评论，快来抢个沙发吧！</p>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import jwt_decode from "jwt-decode";
export default {
  name: "menuchat",
  data() {
    return {
      likecolor: "black",
      collectcolor: "black",
      isshow: false,
      iscomment: [],
      isnocomment: false,
      menucomment: [],
      newcomment: ""
    };
  },
  //获取父组件传过来的点赞数
  props: ["meallikeNum", "headPic", "userName"],
  created() {
    console.log(this.$route.params)
    this.$axios
      .get("http://localhost:3000/menu/selmenulike/"+this.$route.params.mealId)
      .then(res => {
        console.log('aa',res.data.data)
        if (res.data.data == 0) {
          this.likecolor = "orangered";
        }
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
    this.$axios
      .get("http://localhost:3000/chat/selcollect/"+
        this.$route.params.mealId+"/"+0)
      .then(res => {
        if (res.data.data == 0) {
          this.collectcolor = "orangered";
        }
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
    console.log(this.headPic, this.userName);
  },
  methods: {
    like() {
      // console.log(this.$route.params)
      //增加点赞数
      this.$axios
        .post("http://localhost:3000/menu/addlike", this.$route.params)
        .then(res => {
          // console.log("查询结果：", res.data.data);
          //判断是否已经点赞，取消点赞数
          if (res.data.data == 1) {
            this.meallikeNum++;
            this.likecolor = "orangered";
          }
          if (res.data.data == 0) {
            if (confirm("您已经点赞过了哦，确定要取消点赞吗？")) {
              this.$axios
                .put("http://localhost:3000/menu/dellike", this.$route.params)
                .then(res => {
                  // console.log("查询结果：", res.data.data);
                  this.meallikeNum--;
                  this.likecolor = "black";
                })
                .catch(err => {
                  console.log("错误信息：", err);
                });
            }
          }
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    },
    collect() {
      //收藏，传套餐Id与类型Id
      this.$axios
        .post("http://localhost:3000/chat/addcollect", {
          collectType: this.$route.params.mealId,
          typeId: 0
        })
        .then(res => {
          //判断是否已经收藏，取消收藏
          if (res.data.data == 1) {
            console.log("收藏成功！", res.data.data);
            this.collectcolor = "orangered";
            alert("收藏成功！");
          }
          if (res.data.data == 0) {
            // console.log(this.$route.params.mealId);
            // console.log({collectType: this.$route.params.mealId,typeId: 0})
            if (confirm("您已经收藏过了哦，确认取消收藏吗？")) {
              this.$axios
                .post("http://localhost:3000/chat/delcollect", {
                  collectType: this.$route.params.mealId,
                  typeId: 0
                })
                .then(res => {
                  if (res.data.data == 1) {
                    console.log("取消收藏成功！", res.data);
                    this.collectcolor = "black";
                    alert("取消收藏成功！");
                  } else {
                    console.log("取消收藏失败！", res.data);
                    alert("取消收藏失败！");
                  }
                })
                .catch(err => {
                  console.log("错误信息：", err);
                });
            }
          }
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    },
    comment() {
      //获取其他用户评论的内容
      console.log(this.$route.params.mealId);
      this.$axios
        .get(
          "http://localhost:3000/chat/comment/" +
            0 +
            "/" +
            this.$route.params.mealId
        )
        .then(res => {
          //判断改用户有评论过的内容 显示删除样式
          var phone = jwt_decode(localStorage.getItem("mytoken")).phone;
          var rma = document.querySelectorAll(".rma");
          console.log("查询结果：", res.data.data);
          if (res.data.msg == "获取评论信息失败！") {
            this.isnocomment = true;
          } else {
            this.isnocomment = false;
            this.menucomment = res.data.data;
          }
          for (var i = 0; i < this.menucomment.length; i++) {
            if (phone == this.menucomment[i].Phone) {
              this.iscomment[i] = true;
            } else {
              this.iscomment[i] = false;
            }
          }
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    },
    upcomment() {
      //发布评论
      console.log(this.newcomment);
      //判断发布内容是否为空
      if (this.newcomment == "") {
        alert("评论不能为空哦！");
      } else {
        this.$axios
          .post("http://localhost:3000/chat/upComment", {
            commentContent: this.newcomment,
            typeId: 0,
            commentType: this.$route.params.mealId
          })
          //发布成功。获取新的评论内容覆盖
          .then(res => {
            console.log("查询结果：", res.data.data.insertId);
            var commentId = res.data.data.insertId;
            alert("发表评论成功！");
            var phone = jwt_decode(localStorage.getItem("mytoken")).phone;
            this.menucomment.unshift({
              commentId: commentId,
              Phone: phone,
              commentContent: this.newcomment,
              headPic: this.headPic,
              userName: this.userName,
              commentTime: new Date()
            });
            console.log(this.menucomment);
            this.newcomment = "";
            for (var i = 0; i < this.menucomment.length; i++) {
              if (phone == this.menucomment[i].Phone) {
                this.iscomment[i] = true;
              } else {
                this.iscomment[i] = false;
              }
            }
            if (this.menucomment.length == 0) {
              this.isnocomment = true;
            } else {
              this.isnocomment = false;
            }
          })
          .catch(err => {
            console.log("错误信息：", err);
          });
      }
    },
    delcomment(index) {
      //删除评论
      console.log(this.menucomment[index].commentId);
      if (confirm("你确定要删除该条评论吗？")) {
        this.$axios
          .post(
            "http://localhost:3000/chat/delComment/" +
              this.menucomment[index].commentId
          )
          .then(res => {
            //删除评论成功，获取新的评论内容覆盖
            console.log("查询结果：", res.data.data);
            this.menucomment.splice(index, 1);
            var phone = jwt_decode(localStorage.getItem("mytoken")).phone;
            for (var i = 0; i < this.menucomment.length; i++) {
              if (phone == this.menucomment[i].Phone) {
                this.iscomment[i] = true;
              } else {
                this.iscomment[i] = false;
              }
            }
            if (this.menucomment.length == 0) {
              this.isnocomment = true;
            } else {
              this.isnocomment = false;
            }
          })
          .catch(err => {
            console.log("错误信息：", err);
          });
      }
    },
    getPic(pic) {
      if (pic == "userimg.jpg") {
        return require("../assets/images/" + pic);
      } else {
        return require("../../../../Eatproj/EAT/public/upload/" + pic);
      }
    }
  }
};
</script>
<style lang="css" scoped>
#icon {
  float: left;
  width: 100%;
  margin: 10px auto;
}

#icon div {
  float: left;
  width: 33%;
}

#icon div i {
  position: relative;
  left: 50%;
  margin-left: -20px;
}

#icon i:hover {
  /* color: orangered !important; */
  cursor: pointer;
}

#likeNum {
  font-size: 20px;
}
#comments {
  float: left;
  margin: 20px 120px;
  width: 80%;
}

#comments .bos {
  float: left;
  margin: 0 auto;
  width: 100%;
}

#comments #btn {
  float: right;
  background-color: rgb(160, 190, 117);
  width: 100px;
  height: 25px;
  border: 1px solid rgb(160, 190, 117);
}

#comments ul {
  background: #fff;
  border: 0;
  margin: 30px auto;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  float: left;
}

#comments ul li {
  float: left;
  width: 100%;
  /* border: 1px solid; */
  margin: 10px auto;
  background: linear-gradient(45deg, rgb(160, 190, 117), rgb(255, 255, 255))
    fixed;
}
#comments ul li img {
  width: 50px;
  height: 50px;
  float: left;
  border-radius: 50%;
  margin: 10px;
}
#comments ul li i {
  float: left;
  width: 50%;
  padding: 10px;
}

#comments ul li i span {
  font-weight: bolder;
}
#comments ul li #content {
  float: left;
  width: 80%;
  padding: 10px;
}
#comments ul li #content span {
  float: left;
  width: 80%;
}
#comments ul li #content a {
  float: right;
  font-size: 14px;
}
</style>
<style>
/*取消多行文本框的拉伸功能*/
.el-textarea .el-textarea__inner {
  resize: none;
}
</style>